@import 'reset.scss';

html,
body {
    height: 100%;
}

body {
    overflow: hidden;
    position: relative;
}

.index-body {
    background: #e5ede2;
}

.t-x {
    text-align: center;
}

.h100 {
    height: 100%;
}

.img-bg {
    display: block;
    width: 100%;
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pos-a {
    position: absolute;
}

.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #ffd56f;
    z-index: 99;
    .bar-icon{
        position: absolute;
        bottom:0;
        left:0;
        width: 0.9067rem;
        height: 1.0133rem;
    }
    .bar {
        width: 50%;
        /*background-color: white;*/
        height: 0.0533rem;
        position: absolute;
        top: 40%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding-left:1rem;
        box-sizing: border-box;
        .bar-progress{
            width: 100%;
            margin-top:-0.2333rem;
            height: 0.1067rem;
            background: #fff;
            border-radius: 0.1067rem;
            position: relative;
        }
        .bar-words{
            position: absolute;
            top:-0.7rem;
            left:0;
            text-align: center;
            width: 100%;
            color:#4a2e2a;
            font-size: 0.4rem;
            line-height: 0.4667rem;

        }
        .line {
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: #482c29;
            border-radius: 0.1333rem;
            /*background-image: linear-gradient(-45deg, transparent 0rem, transparent 0.8rem, #482c29 0.9rem, #482c29 2.1rem, transparent 2.1rem, transparent 2.9rem, #482c29 3.1rem);*/
            -webkit-animation: warning-animation 750ms infinite linear;
            animation: warning-animation 750ms infinite linear;
            /*background-color: #0e91f7;*/
            -webkit-transition: all .3s;
            transition: all .3s;
        }
    }
    .bar-img{
        margin:0.2667rem;
        img{
            display: none;
        }
    }
}

.wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;

}

.logo-wrap {
    position: absolute;
    top: 0.6667rem;
    width: 100%;
    left: 0;

    .logo1 {
        height: 0.8267rem;
    }

    .logo2 {
        height: 0.7733rem;
    }
}

.main-wrap {
    height: 100%;
    padding: 0 0.4rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.per-list {
    display: none;
    padding-bottom: 0.2667rem;

    &.on {
        display: block;
    }

    .per-one {
        position: relative;
        padding: 0 0 0 1.3333rem;
        border-bottom: 2px solid #000;
        height: 1.3333rem;

        &:last-child {
            border: none;
        }
    }

    .per-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 1.3333rem;
        height: 1.3333rem;
        height: 100%;
        line-height: 1.3333rem;
        font-size: 0.32rem;

        img {
            float: right;
            width: 0.9333rem;
            height: 0.9333rem;
            margin: 0.2rem 0.1333rem 0 0;
            border: 1px solid #000;
            border-radius: 50%;
        }
    }

    .per-prize,
    .per-name {
        width: 50%;
        line-height: 1.3333rem;
        font-size: 0.3467rem;
        color: #401700;
    }

    .per-name {
        width: 60%;
        text-align: center;
        font-size: 0.32rem;
        height: 100%;
    }

    .per-n-sub {
        width: 100%;
        height: 100%;
        color: #2b385f;
    }

    .per-c1 {
        color: #b44400;
    }

    .per-prize {
        width: 40%;
        text-align: right;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.32rem;
        height: 100%;
        color: #2b385f;

        img {
            vertical-align: top;
            display: inline-block;
        }
    }
}

.back {
    position: absolute;
    width: 1.0133rem;
    bottom: 0.4rem;
    right: 0.2rem;
    z-index: 9;
}

.link {
    position: absolute;
    top:0;
    right: 5%;
    width: 4.0rem;
    z-index: 2;

    /*height: 1.8rem;*/
    a {
        float: right;
        /*height: 100%;*/
        width: 1.3733rem;
        display: block;
    }

    .m20 {
        margin-left: 0.2rem;
    }
}
.clothes{
    position: absolute;
    width: 2.8267rem;
    right:0;
    bottom:40%;
    z-index: 1;
}
.i-main{
    position: absolute;
    width: 92%;
    left:4%;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    .i-tit{
        position: relative;
        /*width: 6.4667rem;*/
        width: 8.2rem;
        margin:0 auto;
        .i-front{
            position: relative;
            z-index: 1;
            animation-duration: 4s;
            animation-delay: 2s;
        }
        .i-back{
            position: absolute;
            width: 100%;
            height: 100%;
            top:4%;
            left:-1%;

            animation-duration: 4s;
        }
    }
    .i-sub-tit{
        /*width: 6.4933rem;*/
        width: 6.6533rem;
        margin:0 auto;
    }
    .i-book{
        width: 8.4667rem;
        margin:0.2667rem 0 0 -0.1333rem  ;
    }
    .start-btn{
        width: 5.2533rem;
        margin:0.4rem auto 0 auto;
        position: relative;
        z-index: 9;
        animation-duration: 2s;

    }
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    .f-word {
        display: block;
        width: 3.5067rem;
        margin: 0.2rem auto;
    }

    .f-bar {}
}

.rule-wrap {
    padding-top: 0.3333rem;
    box-sizing: border-box;
    z-index: 1;

    .r-title {
        position: absolute;
        width: 100%;
        left: 50%;
        margin-left: -1.94666rem;
        top: -0.8rem;
        width: 3.8933rem;
    }

    .rule-main {
        height: 100%;
        box-sizing: border-box;
        /*border-top:0.1333rem solid #fed42a;*/
        border-top: 0.1333rem solid #ec5247;
        border-top-left-radius: 0.1333rem;
        border-top-right-radius: 0.1333rem;
        overflow: hidden;
    }

    .roll-main {
        box-sizing: border-box;
        /*border-top:1px solid #f5dda7;*/
        padding: 0;
        background: #ffe7bc;
        height: 100%;
        padding-top: 1.0933rem;
    }

    .r-day {
        position: absolute;
        top: 2.5rem;
        width: 90%;
        left: 5%;
        height: 1rem;
        line-height: 1rem;
        box-sizing: border-box;

        li {
            /*width: 1.3333rem;*/
            width: 16.6%;
            /*background: #414c75;*/
            font-size: 0.4rem;
            color: #9f3226;
            text-align: center;
            line-height: 0.9333rem;
            border-bottom: 0.0667rem solid #d18501;
            box-sizing: border-box;

            &.on {
                color: #414c75;
                background: #fff;
            }
        }
    }

    .rule-inner {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        width: 92%;
        height: 100%;
        padding: 0.3333rem;
        background: #fff;
        box-sizing: border-box;
        /*border: 0.0533rem solid #000;*/
        border-bottom: none;
        border-top-left-radius: 0.1rem;
        border-top-right-radius: 0.1rem;
    }

    

    .rule-tit {
        width: 4.08rem;
        position: absolute;
        left: 50%;
        top: 1rem;
        margin: 0 0 0 -2.04rem;
    }
    .rule-outer{
        padding-top:2rem;
        background: #f1ce60;
        height: 100%;box-sizing: border-box;
    }
    .rule-img-wrap {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 0 0.2667rem 0;
        width: 90%;
        margin:0 auto;
        box-sizing: border-box;
        background: #f1ce60;
    }
}
.p-list{
    li{list-style: none;}
    .p-item{
        width: 50%;
        box-sizing: border-box;
        padding:0 0.3333rem;
        float: left;
        margin:0.2rem 0 ;
    }
    .p-inner{
        background: #d18501;
        padding:0.1067rem;
    }
    .p-img{
        height: 3.3333rem;
        position: relative;
        img{
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            max-height: 100%;
            max-width: 100%;
        }
    }
    .p-info{
        height: 0.8267rem;
        margin:0.1333rem 0;
    }
    .p-info-img{
        float: left;
        width: 0.8267rem;
        height: 0.8267rem;
        margin:0 0.2667rem;
        img{
            display: block;
            width: 100%;height: 100%;
            border:1px solid #000;
            border-radius: 50%;
        }
    }
    .p-words{
        overflow:hidden;
        color:#faf6bb;
        .c1{
            line-height: 0.5333rem;
            font-size: 0.4533rem;
            margin-top:0.0667rem;
        }
        .c2{
            font-size: 0.1867rem;
        }
    }
}


.mask {
    display: none;
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);

    .m-box {
        width: 76%;
        left: 12%;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        background: #d18501;
        border: 1px solid #000;
        border-radius: 0.2rem;
        padding: 0.7rem 0;
        .m-inner{
            padding:0.2667rem;
        }
        .close{
            position: absolute;
            width: 0.44rem;
            height: 0.44rem;
            top:-0.6667rem;
            right:-0.6667rem;
        }
        .m-close {
            position: absolute;
            bottom: -1.6667rem;
            width: 4.9333rem;
            left: 50%;
            height: 1.1333rem;
            line-height: 1.1333rem;
            text-align: center;
            margin-left:-2.4667rem;
            background: #d18501;
            color:#faf6bb;
            font-size: 0.56rem;
            font-weight: bold;
            border-radius: 0.2rem;
        }
    }
    .m-loading{
        position: absolute;
        color:#fff;
        font-size: 0.4rem;
        text-align: center;
        width: 100%;
        top:50%;
        -webkit-transition: translateY(-50%);
        transition: translateY(-50%);
    }
    .m-tit{
        font-size: 0.8rem;
        font-weight: bold;
        text-align: center;
        color:#faf6bb;
    }
    .m-sub-tit{
        font-size: 0.3733rem;
        color:#faf6bb;
        text-align: center;
        padding:0.1333rem 0;
    }
    .m-input{
        width: 80%;
        margin:0 auto;
        padding-top:0.2667rem;
        input{
            display: block;
            color:#444444;
            width: 100%;
            height: 0.9067rem;
            line-height: 0.9067rem;
            font-size: 0.3467rem;
            text-indent: 1.5em;
            border:1px solid #000;
            border-radius: 0.1333rem;
            background: #f8f1b4;
            margin:0.2rem 0;
        }
    }
}

.rotateAll {
    -webkit-animation-name: rotateAll;
    animation-name: rotateAll;
}

@keyframes rotateAll {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-webkit-keyframes warning-animation {
    from {
        background-position:0 0;
    }

    to {
        background-position:3em 0;
    }
}

@keyframes warning-animation {
    from {
        background-position:0 0;
    }

    to {
        background-position:3em 0;
    }
}

@-webkit-keyframes rotateAll {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

#music {
    position: fixed;
    width: 10%;
    /*height: 0.6667rem;*/
    right: 0.2667rem;
    top: 0.2667rem;
    z-index: 1;
}

#music.on {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: rotateAll 5s infinite;
    animation: rotateAll 5s infinite;
}

#music img {
    display: block;
    height: 100%;
    width: 100%;
}

#music.on .play {
    display: block;
}

#music.on .pause {
    display: none;
}

#music .play {
    display: none;
}

#music .pause {
    display: block;
}

.index {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: #ffc84b;

    .light {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 150%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

        img {
            display: block;
            height: 100%;
            width: auto;
            -webkit-transform-origin: center center;
            transform-origin: center center;
            -webkit-animation: rotateAll 20s infinite;
            animation: rotateAll 20s infinite;
        }
    }

}
.preserve-3d{
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.photo-box{
    position: absolute;
    width: 86%;
    left:7%;
    top:50%;
    -webkit-transform:perspective(2000px) translateY(-50%);
    transform:perspective(2000px) translateY(-50%);
    .photo-inner{
        width: 100%;
        height: 100%;
        img{
            display: block;
            width: 100%;
        }
    }
    .arr-next{
        position: absolute;
        width: 1.0533rem;
        top:50%;
        right:-0.5333rem;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: none;
        z-index: 2;
    }
    .photo-hand{
        position: absolute;
        width: 4rem;
        height: 0.6667rem;
        top:50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        left:60%;
        img{
            position: absolute;
        }
        .fl{
            animation-duration: 4s;
            animation-delay: 1s;
        }
        .fr{
            animation-duration: 4s;
        }
    }
    .page{
        -webkit-transform-origin: 0 50%;
        transform-origin: 0 50%;
        -webkit-transition-duration: 2s;
        transition-duration: 2s;
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
    }
    .page1{
        position: relative;
        z-index: 1;
    }
}

.i-sub{
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    padding:0.2667rem;
    box-sizing: border-box;
    .i-inner{
        width: 100%;
        height: 100%;
        position: relative;
    }
}

.upload-box{
    .upload-1{
        position: absolute;
        width: 92%;
        top:4%;
        left:4%;
        height: 92%;
        background: #fff;
        box-sizing: border-box;
        padding:0.3333rem;
    }
    .up1-inner{
        width: 100%;
        height: 100%;
        background: #ed5650;
        position: relative;
    }
    .up1-main{
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        padding:0 0.3333rem;
        top:50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .up1-tit{
        padding:0.1333rem 0;
        width: 5.0667rem;
        margin:0 auto;
    }
    .up1-input{
        width: 92%;
        margin:0 auto;
        box-sizing: border-box;
        padding:0.2667rem;
        background: #fff;
        position: relative;
        input{
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left:0;
            opacity: 0;
        }
        .show-img{
            position: absolute;
            width: 90%;
            height: 90%;
            top:5%;
            left:5%;
            display: none;
        }
    }
    .up1-words{
        width: 7.4rem;
        margin:0.5333rem auto 0 auto;
    }


    .res-wrap{
        position: absolute;
        width: 100%;
        top:50%;
        left:0%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .result{
        /*position: absolute;*/
        width: 92%;
        top:4%;
        left:4%;
        margin:0 auto;
        background: #fff;
        box-sizing: border-box;
        padding:0.3333rem;
    }
    .r-inner{
        padding:0.4rem;
        background: #f1ce60;   
        position: relative;
    }
    .create-img{
        margin:0.3333rem auto;
    }
    .res-btn{
        .btn-wrap{
            margin-top:0.3333rem;
        }
        p{color:#faf6bb;text-align: center;padding:0.1333rem 0;}
        .btn{
            width: 3.44rem;
        }
    }
}

.list-wrap{
    position: absolute;
    width: 100%;
    height: 100%;
    left:0%;
    top:0%;
    padding:0.4rem;
    box-sizing: border-box;
    .list-inner{
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: #fff;
        padding:0.2667rem;
    }
    .list-box{
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        padding-top:3.2rem;
        background: #daa932;
    }
    .list-all{
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        .p-inner{
            border:1px solid #000;
            background: #d18501;
        }
        .p-nothing{
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left:0;
            background: #daa932;
            display: none;
            div{
                position: absolute;
                top:50%;
                width: 100%;
                left:0;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                color:#faf6bb;
                text-align: center;
                font-size: 0.5333rem;
            }
        }
    }
    .list-top{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        .list-tit{
            width: 8.12rem;
            margin:0 auto;
            padding:0.4rem 0;
        }
        .list-bar{
            height: 0.7333rem;
            padding:0 0.3333rem;
        }
        .list-switch{
            float: left;
            height: 100%;
            span{
                display: inline-block;
                width: 1.0667rem;
                height: 100%;
                margin:0 0.1333rem;
                text-align: center;
                color:#faf6bb;
                position: relative;
                font-size: 0.3733rem;
            }
            .on::before{
                content:'';
                position: absolute;
                width: 100%;
                bottom:0;
                left:0;
                height: 4px;
                border:1px solid #000;
                background: #d18501;
                border-radius: 0.08rem;
                box-sizing: border-box;
            }
        }
        .list-search{
            float: right;
            input,.btn-search{
                display: inline-block;
                width: 3.2667rem;
                height: 0.72rem;
                line-height: 0.72rem;
                text-align: center;
                border:1px solid #000;
                background: #d18501;
                border-radius: 0.56rem;
                box-sizing: border-box;
                color:#faf6bb;
                vertical-align: top;
            }
            .btn-search{
                width: 1.28rem;
            }
             input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {   
                 /* WebKit browsers */   
                color: #faf6bb;   
                }   
                input:-moz-placeholder, textarea:-moz-placeholder {   
                /* Mozilla Firefox 4 to 18 */   
                color: #faf6bb;   
                }   
                input::-moz-placeholder, textarea::-moz-placeholder {   
                 /* Mozilla Firefox 19+ */   
                color: #faf6bb;   
                }   
                input:-ms-input-placeholder, textarea:-ms-input-placeholder {   
                 /* Internet Explorer 10+ */   
                color: #faf6bb;   
                }
        }
    }
}

.p-100{
    position: absolute;
    width: 100%;
    top:0;
    left:0;
    height: 100%;
}